import { RouteObject } from "react-router-dom"

import MainPage from "@/pages/AccountPage/MainPage"
import AvatarPage from "@/pages/AccountPage/subPages/AvatarPage"
import VerifyType from "@/pages/AccountPage/subPages/VerifyType"

import type { FormType } from "@/pages/AccountPage/formFactory"
import { FormFactory } from "@/pages/AccountPage/formFactory"
import { useParams } from "react-router-dom"

// eslint-disable-next-line react-refresh/only-export-components
const FormWrapper = () => {
    const { type } = useParams() as { type: string }
    console.log("account type: ", type?.toLowerCase() as FormType)
    return <FormFactory type={type?.toLowerCase() as FormType}></FormFactory>
}

export const accountRoutes: RouteObject[] = [
    {
        index: true,
        element: <MainPage />,
    },
    {
        path: "avatar",
        element: <AvatarPage />,
    },
    {
        path: "verifytype",
        element: <VerifyType />,
    },
    {
        path: "form/:type",
        element: <FormWrapper />,
    },
]
